import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Input } from 'antd';
import Articles from './articles';
import Projects from './projects';

const tabList = [
  {
    key: 'articles',
    tab: '文章',
  },
  {
    key: 'projects',
    tab: '项目',
  },
];

const ArticleManage: React.FC = () => {
  const [tabActiveKey, setTabActiveKey] = useState<string>('articles');

  const handleTabChange = (key: string) => {
    setTabActiveKey(key);
  };

  const handleFormSubmit = (value: string) => {
    // eslint-disable-next-line no-console
    console.log(value);
  };

  return (
    <PageContainer
      content={
        <div style={{ textAlign: 'center' }}>
          <Input.Search
            placeholder="请输入"
            enterButton="搜索"
            size="large"
            onSearch={handleFormSubmit}
            style={{ maxWidth: 522, width: '100%' }}
          />
        </div>
      }
      tabList={tabList}
      tabActiveKey={tabActiveKey}
      onTabChange={handleTabChange}
    >
      {tabActiveKey === 'articles' && <Articles />}
      {tabActiveKey === 'projects' && <Projects />}
    </PageContainer>
  );
};

export default ArticleManage;
